import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../store';
import ImageUpload from '../components/ImageUpload';
import ImageEditor from '../components/ImageEditor';

const Home: React.FC = () => {
  const { currentImage } = useSelector((state: RootState) => state.image);

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* 头部 */}
      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                Lumi AI 图像处理
              </h1>
            </div>
            <div className="flex items-center space-x-4">
              <span className="text-sm text-gray-500 dark:text-gray-400">
                智能图像处理工具
              </span>
            </div>
          </div>
        </div>
      </header>

      {/* 主内容 */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {!currentImage ? (
          /* 上传区域 */
          <div className="max-w-2xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
                开始处理您的图像
              </h2>
              <p className="text-lg text-gray-600 dark:text-gray-400">
                上传图片，使用AI技术进行智能处理和优化
              </p>
            </div>
            <ImageUpload />
            
            {/* 功能介绍 */}
            <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <span className="text-blue-600 dark:text-blue-400 text-xl">🎨</span>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  AI增强
                </h3>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  智能提升图像质量和清晰度
                </p>
              </div>
              
              <div className="text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <span className="text-green-600 dark:text-green-400 text-xl">✂️</span>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  背景移除
                </h3>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  一键智能移除图像背景
                </p>
              </div>
              
              <div className="text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <span className="text-purple-600 dark:text-purple-400 text-xl">🔍</span>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  超分辨率
                </h3>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  无损放大图像分辨率
                </p>
              </div>
              
              <div className="text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <span className="text-orange-600 dark:text-orange-400 text-xl">🎯</span>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  降噪处理
                </h3>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  智能减少图像噪点
                </p>
              </div>
            </div>
          </div>
        ) : (
          /* 编辑器区域 */
          <div className="h-[calc(100vh-12rem)]">
            <ImageEditor />
          </div>
        )}
      </main>
    </div>
  );
};

export default Home;